<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta nmse="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="vendors/msui/css/msui.css" />
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/app-nav.css">
    <script type="text/javascript" src="vendors/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="vendors/msui/js/msui.min.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/highstock.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/highcharts-more.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/exporting.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/export-data.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/solid-gauge.js"></script>
    <script src="vendors/Highcharts-6.0.3/code/modules/drilldown.js"></script>
    <script type="text/javascript" src="assets/js/app-nav.js"></script>
    <script type="text/javascript" src="assets/js/app-template.js"></script>
    <script src="vendors/echarts.js"></script>
    <script src="assets/js/regionalEnergyMonitoring.js"></script>
    <script src="assets/js/region_select.js"></script>
    <link rel="stylesheet"  href="assets/css/regionalEnergyMotor.css">
</head>
<body>
    <div class="app-nav"></div>
    <div class="app-wrapper" id="content" >
        <div class="ms-tabs" data-ms-tabs>
            <div class="ms-tabs-bd">
                <div class="" id="tab1">
                    <!--region select-->
                    <div id="regionSelect">
                        区 ：
                        <select id="area" onchange="onAreaSelect()">
                            <option>All</option>
                        </select>
                        建筑 ：
                        <select id="building" onchange="onBuildingSelect()">
                            <option>----</option>
                        </select>
                        楼层 ：
                        <select id="floor" onchange="onFloorSelect()">
                            <option>----</option>
                        </select>
                        房间 ：
                        <select  id="room">
                            <option>----</option>
                        </select>
                        <button type="button" class="ms-btn ms-btn-primary" onclick="search()">查询</button>
                    </div>
                    <!--energy brief-->
                    <div class="row  ms-cf">
                        <div class="ms-u-sm-12 ms-u-md-12 ms-u-lg-4">
                                <div class="widget widget-primary ms-cf card card1">
                                    <div class="widget-statistic-header">
                                        能耗面积
                                    </div>
                                    <div class="widget-statistic-body">
                                        <div class="widget-statistic-value" id="areaS">
                                            3985 <span> 平方米</span>
                                        </div>
                                        <div class="widget-statistic-description">
                                            能耗指标 <strong>8650</strong> kWh
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-4">
                            <div class="widget widget-primary ms-cf card card2">
                                <div class="widget-statistic-header">
                                    本日能耗
                                </div>
                                <div class="widget-statistic-body">
                                    <div class="widget-statistic-value" >
                                        <span id="total">7750 </span><span id="kwh"> kWh</span>
                                    </div>
                                    <div class="widget-statistic-description">
                                        环比昨日 <strong>增加569.32</strong> kWh
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ms-u-sm-12 ms-u-md-6 ms-u-lg-4 ">
                            <div class="widget widget-purple ms-cf card card3">
                                <div class="widget-statistic-header">
                                    本日能耗成本
                                </div>
                                <div class="widget-statistic-body">
                                    <div class="widget-statistic-value" >
                                          <span id="cost">5775.50</span><span id="rmb"> RMB</span>
                                    </div>
                                    <div class="widget-statistic-description">
                                        环比昨日 <strong>增加￥462.47</strong>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--real time energy monitor-->
                    <div class="ms-g doc-ms-g">
                        <div class="ms-u-sm-12 ms-u-md-8 ms-u-lg-8">
                            <div  class="Shell" style="width:100%;height:480px">
                                <div class="title"> 耗电实时监测</div>
                                <div id="realTimeView" style="width:100%;height:450px"></div>
                            </div>
                        </div>
                        <div class="ms-u-sm-12 ms-u-md-4 ms-u-lg-4">
                            <div id="distributionView1" class="Shell" style="width:100%;height:480px">
                                <div class="title"> 耗电时段分布</div>
                                <div style=" height: 240px; margin: 0 auto;padding-top: 15px">
                                    <div id="solidgaugePeak" style="width: 50%; height: 180px; float: left"></div>
                                    <div id="solidgaugeFlat" style="width: 50%; height: 180px; float: left"></div>
                                    <div id="solidgaugeValley" style="width: 50%; height: 180px; float: left"></div>
                                    <div id="solidgaugeCommon" style="width: 50%; height: 180px; float: left"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--child region energy brief-->
                    <div  class="Shell" style="width:100%;height:500px;margin: 12px">
                            <div class="title"> 区域耗电概览</div>
                            <div id="childRegionView" style="width:100%;height:480px"></div>
                    </div>
                 </div>
            </div>
        </div>
    </div>
</body>

</html>